<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css" />
		<link rel="stylesheet" type="text/css" href="css/slider.css"/>
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="header">
			<div class="header_l"><img src="img/weibiaoti--@2x.png"></div>
			<div class="header_c">输入搜索的内容</div>
			<div class="header_r"><span><a href="">首页</a></span><img src="img/椭圆%201@2x.png"></div>
		</div>
		<div style="height:auto;margin: 0 0.506666rem;" class="swiper-container">
			<div class="swiper-wrapper">
				<!-- 下面是4个不同颜色的轮播滑块 -->
				<div class="swiper-slide sw"><img src="img/banner@2x.png"></div>
				<div class="swiper-slide sw"><img src="img/banner@2x.png"></div>
				<div class="swiper-slide sw"><img src="img/banner@2x.png"></div>
				<div class="swiper-slide sw"><img src="img/banner@2x.png"></div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<script type="text/javascript">
			var mySwiper = new Swiper('.swiper-container', { //初始化Swiper
				autoplay: { //自动切换
					delay: 3000,
					stopOnLastSlide: false,
					disableOnInteraction: false,

				},
				navigation: { //前进后退
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',

				},
				pagination: { //分页器
					el: '.swiper-pagination',
					clickable: true,

				},
				loop: true, //循环

			})
		</script>
		<ul class="nav">
			<li><a href="#"><span><img src="img/矢量智能对象@2x(2).png"></span><span>学习中心</span></a></li>
			<li><a href="#"><span><img src="img/矢量智能对象@2x(3).png"></span><span>选课中心</span></a></li>
			<li><a href="#"><span><img src="img/矢量智能对象@2x.png"></span><span>教学课程</span></a></li>
			<li><a href="#"><span><img src="img/矢量智能对象@2x(1).png"></span><span>在线课程</span></a></li>
		</ul>


		<ul class="sheji contianer">
			<li class="sheji_l">
				<a href="">
					<span style="font-size: 0.666666rem;color: white;">设计学院</span>
					<span style="font-size: 0.32rem; color: white;">1232人已订阅</span>
				</a>
			</li>
			<li class="sheji_r">
				<div>
					<span class="st_l">
						<span>技术学院</span><span>1232人已订阅</span>
					</span>
					<span class="st_r">
						<span>运营学院</span><span>1232人已订阅</span>
					</span>
				</div>
				<div>
					<span class="sb_l">
						<span>管理学院</span><span>1232人已订阅</span>
					</span>
					<span class="sb_r">
						<span>职场学院</span><span>1232人已订阅</span>
					</span>
				</div>
			</li>
		</ul>

		<p class="text contianer">
			<span style="font-size: 0.666666rem;"><a href="">今日新课</a><span class="re" style="font-size: 0.24rem;"><a href="">热门</a></span></span>
			<span>查看全部</span>
		</p>

		<ul class="mainn contianer">
			<li>
				<div class="main_litter">
					<span><img src="img/500577327@2x.png"></span>
					<span class="iii">
						<p><a href="#" style="font-size: 0.48rem;">tiny老师教你新媒体运营</a></p>
						<p><a href="#" style="font-size: 0.32rem;">学完轻松写出爆款文案</a></p>
						<p><a href="#" style="color: #fd8a23;"><span style="font-size: 0.453333rem;">￥99</span>
								<span style="font-size:0.266666rem; color: 0.266666rem;border: 1px solid #fd8a23;border-radius: 0.186666rem;padding: 0.066666rem 0.186666rem;">批量免费</span></a></p>
					</span>
				</div>
				<div class="main_litterr">
					<div class="main_l">限报名前200人<div style="margin-left: 0.906666rem;">已有<span style="color: #FF7826;">84</span>人领取</div></div>
					<div  class="mianfei">免费领取</div>
				</div>
			</li>
			<li>
				<div class="main_litter">
					<span><img src="img/500577327@2x.png"></span>
					<span class="iii">
						<p><a href="#" style="font-size: 0.48rem;">tiny老师教你新媒体运营</a></p>
						<p><a href="#" style="font-size: 0.32rem;">学完轻松写出爆款文案</a></p>
						<p><a href="#" style="color: #fd8a23;"><span style="font-size: 0.453333rem;">￥99</span>
								<span style="font-size:0.266666rem; color: 0.266666rem;border: 1px solid #fd8a23;border-radius: 0.186666rem;padding: 0.066666rem 0.186666rem;">批量免费</span></a></p>
					</span>
				</div>
				<div class="main_litterr">
					<div class="main_l">限报名前200人<div style="margin-left: 0.906666rem;">已有<span style="color: #FF7826;">84</span>人领取</div></div>
					<div  class="mianfei">免费领取</div>
				</div>
			</li>
			<li>
				<div class="main_litter">
					<span><img src="img/500577327@2x.png"></span>
					<span class="iii">
						<p><a href="#" style="font-size: 0.48rem;">tiny老师教你新媒体运营</a></p>
						<p><a href="#" style="font-size: 0.32rem;">学完轻松写出爆款文案</a></p>
						<p><a href="#" style="color: #fd8a23;"><span style="font-size: 0.453333rem;">￥99</span>
								<span style="font-size:0.266666rem; color: 0.266666rem;border: 1px solid #fd8a23;border-radius: 0.186666rem;padding: 0.066666rem 0.186666rem;">批量免费</span></a></p>
					</span>
				</div>
				<div class="main_litterr">
					<div class="main_l">限报名前200人<div style="margin-left: 0.906666rem;">已有<span style="color: #FF7826;">84</span>人领取</div></div>
					<div  class="mianfei">免费领取</div>
				</div>
			</li>
			<li>
				<div class="main_litter">
					<span><img src="img/500577327@2x.png"></span>
					<span class="iii">
						<p><a href="#" style="font-size: 0.48rem;">tiny老师教你新媒体运营</a></p>
						<p><a href="#" style="font-size: 0.32rem;">学完轻松写出爆款文案</a></p>
						<p><a href="#" style="color: #fd8a23;"><span style="font-size: 0.453333rem;">￥99</span>
								<span style="font-size:0.266666rem; color: 0.266666rem;border: 1px solid #fd8a23;border-radius: 0.186666rem;padding: 0.066666rem 0.186666rem;">批量免费</span></a></p>
					</span>
				</div>
				<div class="main_litterr">
					<div class="main_l">限报名前200人<div style="margin-left: 0.906666rem;">已有<span style="color: #FF7826;">84</span>人领取</div></div>
					<div  class="mianfei">免费领取</div>
				</div>
			</li>
		</ul>
		<p class="ppp contianer"><span style="font-size: 0.666666rem;">线上分享</span><span style="font-size: 0.346666rem;color: #eee;"><a href="">查看全部</a></span></p>
		
		 <div class="swiper mySwiper contianer" style="margin-bottom:70px;">
		      <div class="swiper-wrapper">
		        <div class="swiper-slide sw1">
					<img src="img/形状%208@2x.png" >
					<div class="ddd">
						<p>赚钱又赚人气的声音课<span>共5节</span></p>
						<p>来自千图网平台<span>1.2万次播放</span></p>
					</div>
				</div>
				<div class="swiper-slide sw1">
					<img src="img/形状%208@2x.png" >
					<div class="ddd">
						<p>赚钱又赚人气的声音课<span>共5节</span></p>
						<p>来自千图网平台<span>1.2万次播放</span></p>
					</div>
				</div>
				<div class="swiper-slide sw1">
					<img src="img/形状%208@2x.png" >
					<div class="ddd">
						<p>赚钱又赚人气的声音课<span>共5节</span></p>
						<p>来自千图网平台<span>1.2万次播放</span></p>
					</div>
				</div>
				<div class="swiper-slide sw1">
					<img src="img/形状%208@2x.png" >
					<div class="ddd">
						<p>赚钱又赚人气的声音课<span>共5节</span></p>
						<p>来自千图网平台<span>1.2万次播放</span></p>
					</div>
				</div>
		      </div>
		    </div>
		
		    <!-- Swiper JS -->
		    <script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
		
		    <!-- Initialize Swiper -->
		    <script>
		      var swiper = new Swiper(".mySwiper", {
		        slidesPerView: 1.8,
		        spaceBetween: 30,
		      });
		    </script>
		
		<ul class="footer">
			<li><a href="#"><span style="color: orange;">&#xe8b9;</span><span>首页</span></a></li>
			<li><a href="#"><span>&#xe614;</span><span>课程</span></a></li>
			<li><a href="#"><span>&#xe8bd;</span><span>话题</span></a></li>
			<li><a href="#"><span>&#xe8a0;</span><span>我的</span></a></li>
		</ul>
	</body>
</html>
